先让我们来搞清楚几个概念，就不长篇大论了，简单直接的说明白

打开F12，当我们用默认的视口去开发移动端，就会发现会有滚动条出现：

这是因为此时默认的布局视口为PC端的视口，当切换到移动端布局模式时，默认的整体画布框度为980px，那么此时布局视口就非常大了，当此时的视觉视口就和手机屏幕一样大，所以会出现滚动条。需要我们手动强制进入理想视口，也就是保证布局视口等于视觉视口，可以通过以下标签设置：

这是苹果的safari的规范，里面的属性为：

由此可以读出这个meta标签的作用就是把画布的宽度等于设备的宽度，缩放值固定为1，也不允许用户缩放，就是固定死了（很有苹果的风格hhh）。

通过媒体查询符@media，来修改不同设备大小下的rem。下面偷来别人写好的哈哈。

这种方式在设置font-size数值的时候，会以一个值为基准，例如100px，然后根据宽度的比值，去算出不同宽度的font-size，就有了上面这么多的情况。这样的好处就是不同屏幕大小的手机屏幕上看到的界面比例都是一样的。

我感觉如果设计稿是宽度为640px-680px之间的还好，刚好1rem=100px，开发时好做换算，但如果不是就很麻烦了。我会pass掉这个方案。

通过lib-flexible这个第三方插件实现rem的自适应。

main.js中引入。

把meta标签注释掉，flexible会自动生成合适的meta标签，调整布局视口。同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem等于75px。

但有个问题，设计稿给的单位是px，每次写css单位都要自己算出是多少rem，所以不推荐，这玩意也很老了。

这个方法是从《前端解决移动端适配的五种方法》这篇博客看来的。

此时，当设计稿的宽度为375px的时候，1rem=100px；

这个方法不知道能不能用在一个工程中，我平时就用来快速写demo用吧。不推荐在工程中使用。

先看什么是vh/vw单位？

首先要知道window.innerHeight = 100vh，宽度同理。那么 1vh就是网页视口高度的百分之一，宽度同理。如下例子：

在手机上，就会呈现一个高度为屏幕高度十分之一，宽度为屏幕宽度十分之一的矩形盒子。

什么是vmax/vmin单位？

设置vmax时，会对比网页视口高度与宽度，选一个最大的最为百分比标准，例如手机的高比宽大，那么就只以网页视口高度为百分比。

在手机上，就会呈现一个高度为屏幕高度十分之一，宽度为屏幕高度十分之一的正方形盒子。

同理设置vmin时，在手机上，就会呈现一个高度为屏幕宽度十分之一，宽度为屏幕宽度十分之一的正方形盒子。

ok，说一个理想的情况。如果我们以UI设计稿的尺寸作为开发画布的尺寸，然后用户手机屏幕再进行等比放大缩小就好。例如设计稿上的一个盒子的宽度是100px，写css的时候转换成vw单位，这样到其他手机上看是等比的。

但我们每次设置单位的时候都要自己换算太麻烦了，这里推荐一个库postcss-px-to-viewport，它能帮我们把写的px单位自动转换成vw或者vh单位。

安装：

webpack在postcss插件里配置：

或者：

然后就可以直接以你设定的画布大小去写像素单位了，会自动给你转成vw或者vh：

使用vue的可以看看这个：vue移动端/pc端适配插件：postcss-px-to-viewport

如果你是项目已经开发很久了才加入这个库的，建议配置里unitToConvert: 'px'，这样之前都是写的px单位就直接生效了，然后看看实机展示是否ok。如果有大面积的很多问题，可以先设置成其他单位例如pxs，这样之前设置的px就不会转换，然后以后再慢慢去调整。

如果是项目刚搭建的，直接unitToConvert: 'px'就好，然后如果有不想转换的可以这样写：

是的，再内联样式中的单位是不会被转换的，想办法用class去改写吧。

之前看网上大家把这个问题说的很难懂，对新手不是很友好，今天就来简单的讲明白什么是一像素问题。

一般情况下，UI同事做出来的设计稿宽度是iPhone6标准的750px：

然而我们的开发界面有设备像素比，所以同样是IPhone6机型却是375px：

这种情况下，如果我们写盒子的边框为1px时，在电脑上看确实是1px，但是真正用手机去看时，就会因为设备像素比而放大两倍变成2px。

我截个图放大给你们看： 上面的123边框css设置的1px，手机看是2px，对比下面的123边框（是真正1px的边框宽度），很明显不同吧！

有人说那我就主动除以2，设置0.5px，不就行了。哈哈，我来告诉你会有什么问题：

明显比下面正常的1px还细一些吧，而且并不是所有设备的设备像素比都是2的，还有3或其他，都除以2显然不合适。

目前我只知道怎么处理设备像素比是2的情况，用transform: scale()结合伪元素实现：

需要哪边的边框就给盒子加上对应的class名，很抱歉没发现最好的解决方案。

但是！其实这一像素的问题真的没有这么重要，很多时候除非UI设计师，用户很难看得出来的，没必要去纠结这玩意。